<template>
  <div class="welcome_wrapper">
    <!-- 小表格 -->
    <el-row class="row-main">
      <el-col :span="6" class="timeline">
        <div class="timeline-top">
          <el-form :inline="true" :model="queryFrom" ref="queryForm">
            <el-form-item prop="deptName">
              <el-input
                type="text"
                placeholder="搜索店铺名"
                v-model="queryFrom.deptName"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="userQuery">查询</el-button>
              <el-button type="primary" @click="resetForm('queryForm')"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="timeline-tab">
          <el-table :data="tableData" style="width: 100%" size="mini">
            <el-table-column
              v-for="item in tabCloum"
              :key="item.prop"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              align="center"
            />
            <el-table-column label="操作" width="250px">
              <template #default="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.row)"
                  v-has="'yun-hd'"
                  >还单</el-button
                >
                <el-button
                  size="mini"
                  type="info"
                  @click="handleUpdate(scope.row)"
                  v-has="'yun-update'"
                  >更新</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row)"
                  v-has="'yun-del'"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <!-- 聊天室 -->
      <el-col :span="18" style="padding: 0px 10px">
        <el-row style="height: 100%" class="lst-box">
          <!-- 用户列表 -->
          <el-col :span="6">
            <div class="user-box">
              <div class="user-title">好友列表-在线({{ onlnLst.length }})</div>
              <el-divider
                style="margin: 0px 0px; padding: 0px 0px"
              ></el-divider>
              <el-scrollbar>
                <div class="user-list" v-for="ukey in onlnLst" :key="ukey.uid">
                  <!-- 用户卡片 -->
                  <el-card
                    class="user-crd"
                    :body-style="{ padding: '10px' }"
                    style="border: none"
                  >
                    <div class="user-info">
                      <div class="user-img">
                        <el-avatar :src="ukey.img"></el-avatar>
                      </div>
                      <div class="user-data">
                        <h5 class="user-name">{{ ukey.name }}</h5>
                        <div class="speak">{{ ukey.job }}</div>
                      </div>
                    </div>
                  </el-card>
                </div>
              </el-scrollbar>
            </div>
          </el-col>
          <el-col :span="18">
            <div class="msgBox">
              <div class="msg-header"></div>
              <!-- <el-divider style="margin: 0px; padding: 0px"></el-divider> -->
              <div class="msg-main" style="padding: 10px 0px">
                <!-- 消息列表 -->
                <div id="message" v-scroll-bottom="session">
                  <ul>
                    <li v-for="item in userMessage">
                      <p class="time">
                        <span>{{ item.date }}</span>
                      </p>
                      <div class="main" :class="{ self: item.type == 1 }">
                        <img class="avatar" :src="item.img" alt="" />
                        <div class="text">
                          <template v-if="item.msgType != 2">
                            {{ item.content }}
                          </template>
                          <!-- 表格消息 -->
                          <template v-else-if="item.msgType == 2">
                            <el-table
                              :data="item.content"
                              border
                              show-summary
                              style="width: 100%"
                              size="mini"
                              :row-style="{ padding: 0, margin: 0 }"
                              :cell-style="{ padding: 0, margin: 0 }"
                              :default-sort="{
                                prop: 'diffCount',
                                order: 'descending',
                              }"
                            >
                              <el-table-column
                                align="center"
                                prop="deptName"
                                :label="`店铺(${item.content.length})`"
                                width="180px"
                                style="padding: 0; margin: 0"
                              >
                              </el-table-column>
                              <el-table-column
                                sortable
                                prop="deptCount"
                                label="已做"
                                align="center"
                              >
                              </el-table-column>
                              <el-table-column
                                sortable
                                prop="diffCount"
                                label="未做"
                                align="center"
                              >
                              </el-table-column>
                            </el-table>
                          </template>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
              <!-- 发送消息 -->
              <div class="msg-bottom">
                <!-- 图片表情包 -->
                <div class="msg-bottom-header">
                  <div class="emio" @click="shoEmio = !shoEmio">
                    🙄
                    <div class="emio-group" v-show="shoEmio">
                      <el-scrollbar height="100px">
                        <div class="emio-box" @click="addEmoticons">
                          <div
                            class="emio-item"
                            v-for="(item, index) in emio"
                            :key="index"
                          >
                            {{ item }}
                          </div>
                        </div>
                      </el-scrollbar>
                    </div>
                  </div>
                  <!-- 还单快速模板 -->
                  <!-- 清空聊天信息 -->
                  <div class="remove-msg" @click="removeMsg">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="清空聊天信息"
                      placement="top-start"
                    >
                      <i class="el-icon-chat-dot-round"></i>
                    </el-tooltip>
                  </div>
                  <div
                    class="remove-msg"
                    style="margin-left: 10px"
                    v-show="hideGroup"
                    @click="fstUploadY"
                    v-has="'yun-upload'"
                  >
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="快速导出Y"
                      placement="top-start"
                    >
                      <i class="el-icon-finished"></i>
                    </el-tooltip>
                  </div>
                  <div
                    class="remove-msg"
                    style="margin-left: 10px"
                    @click="fstUploadQ"
                    v-has="'yun-upload'"
                    v-show="hideGroup"
                  >
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="快速导出Q"
                      placement="top-start"
                    >
                      <i class="el-icon-cpu"></i>
                    </el-tooltip>
                  </div>
                  <div
                    class="remove-msg"
                    style="margin-left: 10px"
                    v-show="hideGroup"
                    v-has="'yun-upload'"
                    @click="fstUploadB"
                  >
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="快速导出B"
                      placement="top-start"
                    >
                      <i class="el-icon-mouse"></i>
                    </el-tooltip>
                  </div>
                </div>
                <!-- 发送消息框 -->
                <div class="send-message">
                  <textarea
                    class="msg-input"
                    v-model="messageForm"
                    cols="30"
                    rows="10"
                    placeholder="可以发送关键指令如:@核查-姓名"
                  ></textarea>
                  <!-- <WangEditor /> -->
                  <!-- 空白消息 -->
                  <div class="msg-nul" v-show="msgNull">不能发送空白消息</div>
                  <button class="send-submit" @click="sendSubmit">发送</button>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
  <!-- 还单 -->
  <el-dialog title="还单" v-model="dialogFormVisible" width="400px">
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      ref="formInline"
    >
      <el-form-item label="原有人员" prop="yuaUser">
        <el-input
          v-model="formInline.userName"
          :required="true"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="还单店铺" prop="deptName" :required="true">
        <el-input v-model="formInline.deptName" disabled></el-input>
      </el-form-item>
      <el-form-item label="当前单量" prop="deptCount" :required="true">
        <el-input v-model="formInline.deptCount" disabled></el-input>
      </el-form-item>
      <el-form-item label="被还单人员" prop="updateName" :required="true">
        <el-select
          v-model="formInline.updateName"
          filterable
          placeholder="可搜索"
          clearable
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="要还单量" prop="updateCount" :required="true">
        <el-input v-model="formInline.updateCount"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handeHuan">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 还单结束 -->
  <!-- 更新 -->
  <el-dialog title="更新" v-model="dialogFormUpdate" width="400px">
    <el-form
      :inline="true"
      :model="formUpdate"
      class="demo-form-inline"
      ref="formInline"
    >
      <el-form-item label="店铺" prop="deptName" :required="true">
        <el-input v-model="formUpdate.deptName"></el-input>
      </el-form-item>
      <el-form-item label="人员" prop="userName">
        <el-select
          v-model="formUpdate.userName"
          filterable
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单量" prop="yuaUser">
        <el-input v-model="formUpdate.deptCount" :required="true"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormUpdate = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmitUpdate">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 更新 -->
</template>

<script>
import socket from './../socket';
import storage from './../utils/storage'
import { mapState } from 'vuex'
export default {
  name: 'Yundata',
  data () {
    return {
      queryFrom: {},
      hideGroup: true,
      msgNull: false,
      dialogFormVisible: false,
      dialogFormUpdate: false,
      formUpdate: {},
      formInline: {
      },
      infroClaa: {
        meItem: 'msg-item me',
        youItem: 'msg-item',
        meIcon: 'msg-info me-io',
        youIcon: 'msg-info you-io'
      },
      messageForm: '',
      shoEmio: false,
      tableData: [],
      page: {
        pageNum: 1,
        pageSize: 20,
      },
      options: [
        {
          value: '周剑涛',
          label: '周剑涛',
        },
        {
          value: '郭倩',
          label: '郭倩',
        },
        {
          value: '陈俊超',
          label: '陈俊超',
        },
        {
          value: '吴航宇',
          label: '吴航宇',
        },
        {
          value: '婷婷',
          label: '婷婷',
        },
        {
          value: '莎莎',
          label: '莎莎',
        },
        {
          value: '刘能盛',
          label: '刘能盛',
        },
        {
          value: '吕宁',
          label: '吕宁',
        },
        {
          value: '陈胜',
          label: '陈胜',
        },
        {
          value: '朱新佐',
          label: '朱新佐',
        },
        {
          value: '程清蝶',
          label: '程清蝶',
        },
        {
          value: '邱群',
          label: '邱群',
        },
        {
          value: '杨洪华',
          label: '杨洪华',
        },
        {
          value: '杨琴',
          label: '杨琴',
        },
        {
          value: '朱梦娇',
          label: '朱梦娇',
        },
        {
          value: '吕诗燕',
          label: '吕诗燕',
        },
        {
          value: '杨梦玲',
          label: '杨梦玲',
        },
        {
          value: '魏康',
          label: '魏康',
        },
        {
          value: '吕思齐',
          label: '吕思齐',
        },
        {
          value: '吕挺',
          label: '吕挺',
        },
        {
          value: '叶彬彬',
          label: '叶彬彬',
        },
        {
          value: '潘先秀',
          label: '潘先秀',
        },
        {
          value: '陈梦洁',
          label: '陈梦洁',
        },
        {
          value: '胡菲菲',
          label: '胡菲菲',
        },
        {
          value: '施艳阳',
          label: '施艳阳',
        },
        {
          value: '周赛婉',
          label: '周赛婉',
        },
        {
          value: '陈思阳',
          label: '陈思阳',
        },
        {
          value: '项赋杰',
          label: '项赋杰',
        },
        {
          value: '胡豪杰',
          label: '胡豪杰',
        },
        {
          value: '章秋童',
          label: '章秋童',
        },
        {
          value: '周晓益',
          label: '周晓益',
        },
        {
          value: '吴冰焱',
          label: '吴冰焱',
        },
      ],
      tabCloum: [
        {
          label: "操作人员",
          prop: "userName",
        },
        {
          label: "店铺名",
          prop: "deptName"
        },
        {
          label: '单量',
          prop: 'deptCount',
        }
      ],
      Y: [
        '陈梦洁',
        '胡菲菲',
        '施艳阳',
        '周赛婉',
        '陈思阳',
        '项赋杰',
        '胡豪杰',
        '章秋童',
        '周晓益',
        '吴冰焱',
      ],
      Q: [
        '程清蝶',
        '邱群',
        '杨洪华',
        '杨琴',
        '朱梦娇',
        '吕诗燕',
        '杨梦玲',
        '魏康',
        '吕思齐',
        '吕挺',
        '叶彬彬',
        '潘先秀',
      ],
      B: [
        '周剑涛',
        '郭倩',
        '陈俊超',
        '吴航宇',
        '婷婷',
        '莎莎',
        '刘能盛',
        '吕宁',
        '陈胜',
        '朱新佐',
      ],
      setTime: "",
      emio: ['😂', '🙏', '😄', '😏', '😇', '😅', '😌', '😘', '😍', '🤓', '😜', '😎', '😊', '😳', '🙄', '😱', '😒', '😔', '😷', '👿', '🤗', '😩', '😤', '😣', '😰', '😴', '😬', '😭', '👻', '👍', '✌️', '👉', '👀', '🐶', '🐷', '😹', '⚡️', '🔥', '🌈', '🍏', '⚽️', '❤️', '🇨🇳'],
    }
  },
  computed: {
    ...mapState(['userMessage', 'onlnLst', 'allLogList'])
  },
  mounted () {
  },
  methods: {
    /** pop生成 */
    sendPopUpload (data, group) {
      this.setTime = setInterval(() => {
        let name = data.shift()
        this.messageForm = `导出 ${name} ${group}`
        this.sendSubmit()
        if (data.length == 0) {
          this.hideGroup = true
          clearInterval(this.setTime)
        }
      }, 2000)
    },
    /** 快速导出Y */
    fstUploadY () {
      this.hideGroup = false
      this.sendPopUpload(this.Y, 'Y')
    },
    /** 快速导出Q */
    fstUploadQ () {
      this.hideGroup = false
      this.sendPopUpload(this.Q, 'Q')
    },
    /** 快速导出B */
    fstUploadB () {
      this.hideGroup = false
      this.sendPopUpload(this.B, 'B')
    },
    /** 清空聊天记录 */
    removeMsg () {
      storage.clearItem('userMessage')
      this.$router.go(0)
    },
    /**
     * @type 表单重置
     */
    resetForm (form) {
      this.$refs[form].resetFields();
    },
    /**
     * @type 条件查询
     */
    userQuery () {
      this.getSingleData()
    },
    /** 初始化获取数据 */
    async getSingleData () {
      let params = { ...this.queryFrom, ...this.page }
      const { list, page } = await this.$api.getSingleList(params)
      this.page.total = page.total
      this.tableData = list
    },
    /** 还单 */
    handleEdit (row) {
      // this.resetForm('formInline')
      this.dialogFormVisible = true
      this.$nextTick(() => {
        Object.assign(this.formInline, row)
      })
    },
    /** 提交还单 */
    async handeHuan () {
      let params = { ...this.formInline }
      await this.$api.submitUpdateSingle(params)
      this.dialogFormVisible = false
      this.getSingleData()
      this.$message('操作成功')
    },
    /** 删除 */
    async handleDelete (row) {
      let params = { ...row }
      try {
        await this.$api.submitDeleteSingle(params)
        this.getSingleData()
        this.$message.success('删除成功')
      } catch (error) {
        throw new Error(error)
      }
    },
    /** 更新 */
    handleUpdate (row) {
      this.dialogFormUpdate = true
      this.$nextTick(() => {
        Object.assign(this.formUpdate, row)
      })
    },
    /** 提交更新 */
    async handleSubmitUpdate () {
      let params = { ...this.formUpdate }
      console.log();
      try {
        await this.$api.submitChangeSingle(params)
        this.dialogFormUpdate = false
        this.getSingleData()
        this.$message.success('更改成功')
      } catch (error) {
        throw new Error(error)
      }
    },
    /** 添加表情 */
    addEmoticons (e) {
      let value = e.target.innerHTML
      this.messageForm += value
    },
    /* 发送消息 */
    sendSubmit () {
      if (this.messageForm == '') {
        this.msgNull = true
        setTimeout(() => {
          this.msgNull = false
        }, 2000)
        return
      }
      /** 用户消息 */
      let message = {
        uid: this.$store.state.userInfo.userId,
        name: this.$store.state.userInfo.call,
        type: 1, // 1:自己,2:其他人
        job: this.$store.state.userInfo.job,
        img: `http://q1.qlogo.cn/g?b=qq&nk=${this.$store.state.userInfo.imgUrl}&s=100`,
        content: this.messageForm
      }
      /** 发送 */
      this.$store.commit('saveUserMessage', message)
      socket.emit('sendMessage', message)
      this.messageForm = ''
    }
  },
  directives: {/*这个是vue的自定义指令,官方文档有详细说明*/
    // 发送消息后滚动到底部,这里无法使用原作者的方法，也未找到合理的方法解决，暂用setTimeout的方法模拟
    'scroll-bottom' (el) {
      //console.log(el.scrollTop);
      setTimeout(function () {
        el.scrollTop += 9999;
      }, 1)
    }
  },
}
</script>

<style lang="scss" scoped>
.remove-msg {
  text-align: center;
  line-height: 30px;
  font-size: 20px;
  cursor: pointer;
}
.remove-msg:hover {
  color: #409eff;
}
.timeline-tab {
  height: 95%;
}
.timeline-top {
  height: 5%;
  padding: 5px;
}
.msg-nul {
  position: absolute;
  width: 120px;
  height: 25px;
  background: #ffffff;
  bottom: 36px;
  right: 10px;
  border: 1px solid #dcdfe6;
  text-align: center;
  font-size: 10px;
  line-height: 25px;
}
.msg-nul::after {
  position: absolute;
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  right: 17px;
  bottom: -6px;
  transform: rotate(-45deg);
  border-top: none;
  border-right: none;
}
#message {
  padding: 15px;
  overflow-y: scroll;
  height: 690px;
  ul {
    height: 100%;
    list-style-type: none;
    li {
      margin-bottom: 15px;
    }
  }
  .time {
    text-align: center;
    margin: 7px 0;
    > span {
      display: inline-block;
      padding: 0 18px;
      font-size: 12px;
      color: #fff;
      background-color: #dcdcdc;
      border-radius: 2px;
    }
  }
  .main {
    .avatar {
      float: left;
      margin: 0 10px 0 0;
      border-radius: 3px;
      width: 30px;
      height: 30px;
    }
    .text {
      display: inline-block;
      padding: 0 10px;
      max-width: 80%;
      background-color: #f56c6c;
      border-radius: 4px;
      line-height: 30px;
    }
  }
  .self {
    text-align: right;
    .avatar {
      float: right;
      margin: 0 0 0 10px;
      border-radius: 3px;
      width: 30px;
      height: 30px;
    }
    .text {
      display: inline-block;
      padding: 0 10px;
      max-width: 80%;
      background-color: #b2e281;
      border-radius: 4px;
      line-height: 30px;
    }
  }
}
.send-submit {
  position: absolute;
  right: 15px;
  bottom: 5px;
  border: 1px solid #dbdbdb;
  background: #fbfbfb;
  cursor: pointer;
  color: #909399;
}
.msg-input {
  margin: 0;
  box-sizing: border-box;
  border: none;
  outline: none;
  width: 100%;
  height: 100%;
  padding: 5px 10px;
  resize: none;
}
.send-message {
  width: 100%;
  height: 70px;
  box-sizing: border-box;
  position: relative;
}
.emio-item {
  flex: 20%;
  cursor: pointer;
}
.emio {
  padding: 0 10px;
  height: 100%;
  font-size: 18px;
  line-height: 30px;
  position: relative;
  cursor: pointer;
}
.emio-box {
  display: flex;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
}
.emio-group {
  display: flex;
  position: absolute;
  top: -350%;
  left: -20px;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0);
  z-index: 999;
}
.msg-bottom-header {
  height: 30px;
  width: 100%;
  display: flex;
}

.msg-bottom {
  height: 100px;
  box-sizing: border-box;
}
.msg-main {
  width: 100%;
  flex: 1;
  background: #f8faf9;
}
.msg-header {
  height: 40px;
  width: 100%;
}
.msgBox {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.user-crd:hover {
  background: #e7ebf4;
}
.lst-box {
  border-left: 1px solid #c5c6c77c;
  border-radius: 3px;
  border-top: 1px solid #c5c6c77c;
  border-right: 1px solid #c5c6c77c;
  border-bottom: 1px solid #c5c6c77c;
}
.user-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #c5c6c77c;
  overflow: hidden;
}
.user-info {
  display: flex;
}
.user-img {
  width: 40px;
  height: 40px;
}
.user-data {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 0px 5px;
}
.user-name {
  display: block;
  font-size: none;
  margin: 0px;
  padding: 0px;
  font-size: 18px;
  font-weight: bold;
  color: #afaeb0;
}
.user-title {
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 18px;
  font-weight: 12;
  color: #acacb6;
  font-weight: bold;
}
.user-list {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.speak {
  flex: 1;
  padding: 5px 38px 3px 0px;
  color: #c2bfbfd5;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.welcome_wrapper {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 20px 0px;
}
.el-row {
  width: 100%;
}
.dept-name {
  width: 100%;
  height: 50%;
  font-size: 40px;
  font-weight: bold;
  color: #acacb6;
  padding: 20px 10px;
}
.dept-count {
  width: 100%;
  height: 50%;
  padding: 0px 10px;
  color: #05564f;
  font-weight: bold;
  font-size: 30px;
}
.row-item {
  padding: 0 30px;
  height: 100%;
}
.info-item {
  background: #f5f6f8;
  height: 100%;
}
.row-header {
  height: 140px;
  margin-bottom: 50px;
}
.info-title {
  font-size: 15px;
  color: #acacb6;
}
.row-main {
  height: 100%;
}
.timeline {
  padding: 0px 20px;
}
</style>